<!--
 * @Author: hq
 * @Date: 2022-06-17 21:27:12
 * @LastEditors: hq
 * @LastEditTime: 2022-07-28 15:21:59
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div>
    <div class="card_con middle">
      <!-- <div>暂未开放</div> -->
      <!-- <el-button type="primary" @click="handleRecharge">购买</el-button> -->
      <el-button type="warning" @click="handleSend">赠送库存积分</el-button>
    </div>
    <!--购买 -->
    <el-dialog
      class="payment_dialog"
      title="购买"
      :visible.sync="payment_dialog"
      width="700px"
      :close-on-click-modal="false"
      @close="close"
      :append-to-body="true"
    >
      <div class="con">
        <div class="recharge">
          <div
            @click="handleClick(index, item)"
            class="list"
            :class="[active === index ? 'active' : '']"
            v-for="(item, index) in rechargeArr"
            :key="index"
          >
            <div v-if="item.status">{{ item.text }}</div>
            <el-input
              @input="changeInput"
              v-else
              v-model="item.text"
              placeholder="自定义"
            ></el-input>
          </div>
        </div>
        <div class="cz">
          购买<span>{{ money }}</span
          >元
        </div>
        <el-button type="primary" @click="handleMoney">立即充值</el-button>
      </div>
      <!-- <div class="qr_content" v-if="payment_dialog">
        <vue-qr
          ref="Qrcode"
          :logo-src="logoSrc"
          :size="size"
          :margin="0"
          :text="qrUrl"
          :logoScale="0.2"
          :logoMargin="5"
        />
        <div class="tip">请使用微信扫码支付</div>
      </div> -->
    </el-dialog>
    <!-- 充值二维码 -->
    <el-dialog
      title="充值二维码"
      :close-on-click-modal="false"
      :visible.sync="showQrcode"
      width="500px"
      @close="closeRecharge"
    >
      <div class="qrcodeimg" v-loading="loading">
        <img :src="$http_url + imgSrc" alt="" />
        <div>
          充值金额：<span>{{ money }}</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="赠送积分"
      :visible.sync="send_dialog"
      width="600px"
      :close-on-click-modal="false"
    >
      <div v-if="send_dialog" class="send">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="手机号" prop="phone">
            <el-input
              type="number"
              v-model="ruleForm.phone"
              placeholder="请输入用户手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="赠送积分" prop="score">
            <el-input
              type="number"
              v-model="ruleForm.score"
              placeholder="请输入赠送积分"
              :min="1"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import VueQr from "vue-qr";
import { giveIntegral, rechargeMoney, isPayment } from "@/api/score";
export default {
  //   components: { VueQr },
  data() {
    return {
      loading: false,
      payment_dialog: false,
      showQrcode: false,
      logoSrc: require("@/assets/logo.png"), // 二维码中间logo图片（选填）
      size: 240, // 二维码尺寸（选填）
      qrUrl: "",
      send_dialog: false,

      ruleForm: {
        phone: "",
        score: "",
      },
      rules: {
        phone: [
          { required: true, message: "请输入用户手机号", trigger: "blur" },
        ],
        score: [{ required: true, message: "请输入赠送积分", trigger: "blur" }],
      },
      rechargeArr: [
        { text: "100", status: true },
        { text: "500", status: true },
        { text: "1000", status: true },
        { text: "", status: false },
      ],
      active: 0,
      money: "100",
      imgSrc: "",
      oid: "",
      type: "",
      timer: null,
    };
  },
  methods: {
    //地址
    // async payQr() {
    //   const { data, err } = await payQr({});
    //   if (err === 0) {
    //     this.qrUrl = data.qr;
    //   }
    // },
    async giveIntegral() {
      const { msg, err } = await giveIntegral({
        account: this.ruleForm.phone,
        amount: this.ruleForm.score,
        action: "put",
      });
      if (err === 0) {
        this.$message({
          showClose: true,
          message: "操作成功！",
          type: "success",
        });
        this.send_dialog = false;
      } else {
        this.$message({
          showClose: true,
          message: msg,
          type: "error",
        });
      }
    },
    //获取二维码接口
    async rechargeMoney() {
      const { data, err } = await rechargeMoney({
        amount: this.rechargeArr[this.active].text,
      });
      if (err === 0) {
        this.loading = false;
        this.imgSrc = data.qr;
        this.oid = data.oid;
        this.type = data.type;
        this.timer = setInterval(() => {
          this.isPayment();
        }, 2000);
      }
    },
    //判断是否支付
    async isPayment() {
      const { data, err } = await isPayment({
        oid: this.oid,
        type: this.type,
      });
      if (err === 0) {
        //
      }
    },

    //点击立即充值
    handleMoney() {
      this.showQrcode = true;
      this.loading = true;
      this.rechargeMoney();
    },
    changeInput() {
      this.money = this.rechargeArr[3].text;
    },
    handleClick(val, item) {
      this.active = val;
      this.money = item.text;
      this.rechargeArr[3].text = "";
    },
    handleRecharge() {
      this.payment_dialog = true;
    },
    handleSend() {
      this.send_dialog = true;
    },
    close() {
      this.money = "100";
      this.rechargeArr[3].text = "";
      this.active = 0;
    },
    closeRecharge() {
      clearInterval(this.timer);
      this.timer = null;
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.giveIntegral();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },

  created() {
    // this.payQr();
  },
};
</script>

<style lang="scss" scoped>
.middle {
  height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .el-button {
    width: 200px;
    height: 60px;
    ::v-deep span {
      font-size: 20px;
    }

    & + .el-button {
      margin: 40px 0 0;
    }
  }
}
.send {
  padding: 0 100px 0 0;
}
.qr_content {
  text-align: center;
  padding: 40px 0 80px;
  box-sizing: border-box;
}
.tip {
  font-size: 22px;
  margin-top: 10px;
}
.payment_dialog {
  .con {
    padding: 20px;
    .recharge {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .list {
        width: 20%;
        border: 1px solid #ccc;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        margin-right: 20px;
        margin-bottom: 20px;
        font-size: 20px;
        color: #999999;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .active {
      background-color: #ecf5ff;
      border: 1px solid #61a3ea !important;
      color: #409eff !important;
      /deep/.el-input__inner {
        background-color: #ecf5ff !important;
        color: #409eff !important;
      }
    }
    .cz {
      font-size: 20px;
      margin: 10px 0 20px;

      span {
        color: #2d8cf0;
        margin: 0 10px;
        font-size: 24px;
      }
    }
    .el-button {
      width: 100%;
      margin: 20px 0;
      padding: 15px !important;
      box-sizing: border-box;
    }
  }
  /deep/ .el-input__inner {
    border: 0;
  }
  /deep/.el-input__inner {
    font-size: 20px;
    text-align: center !important;
  }
}
.qrcodeimg {
  padding: 40px 0;
  box-sizing: border-box;
  text-align: center;
  font-size: 20px;
  img {
    width: 200px;
    height: 200px;
  }
  div {
    margin: 30px;
    span {
      color: red;
      font-size: 26px;
    }
  }
}
</style>
